<template>
	<view class="profile-page">
		<view class="profile-form">
			<!-- 头像部分 -->
			<view class="form-item avatar-item">
				<text class="label">头像</text>
				<view class="avatar-wrapper" @click="changeAvatar">
					<image class="avatar" :src="userInfo.avatar || '/static/default_avatar.png'" mode="aspectFill"></image>
					<text class="edit-text">修改</text>
				</view>
			</view>
			
			<!-- 昵称 -->
			<view class="form-item">
				<text class="label">昵称</text>
				<input class="input" v-model="formData.nickname" placeholder="请输入昵称" />
			</view>
			
			<!-- 性别 -->
			<view class="form-item">
				<text class="label">性别</text>
				<view class="input disabled">
					<text>{{ formData.gender === 1 ? '男' : '女' }}</text>
					<text class="tip">不可修改</text>
				</view>
			</view>
			
			<!-- 手机号 -->
			<view class="form-item">
				<text class="label">手机号</text>
				<view class="input disabled">
					<text>{{ formData.phone || '未设置' }}</text>
					<text class="tip">不可修改</text>
				</view>
			</view>
			
			<!-- 微信号 -->
			<view class="form-item">
				<text class="label">微信号</text>
				<input class="input" v-model="formData.wechat" placeholder="请输入微信号" />
			</view>
			
			<!-- 生日 -->
			<view class="form-item">
				<text class="label">生日</text>
				<picker mode="date" :value="formData.birthday" @change="onBirthdayChange" fields="day" class="picker">
					<view class="input">
						<text>{{ formData.birthday || '请选择生日' }}</text>
						<image class="arrow-icon" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
			
			<!-- 属相 -->
			<view class="form-item">
				<text class="label">属相</text>
				<picker :range="zodiacs" :value="zodiacIndex" @change="onZodiacChange" class="picker">
					<view class="input">
						<text>{{ formData.zodiac || '请选择属相' }}</text>
						<image class="arrow-icon" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
			
			<!-- 星座 -->
			<view class="form-item">
				<text class="label">星座</text>
				<picker :range="constellations" :value="constellationIndex" @change="onConstellationChange" class="picker">
					<view class="input">
						<text>{{ formData.constellation || '请选择星座' }}</text>
						<image class="arrow-icon" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
			
			<!-- 身高 -->
			<view class="form-item">
				<text class="label">身高</text>
				<picker :range="heights" :value="heightIndex" @change="onHeightChange" class="picker">
					<view class="input">
						<text>{{ formData.height ? formData.height + 'CM' : '请选择身高' }}</text>
						<image class="arrow-icon" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn" @click="saveProfile">
			<text>完成</text>
		</view>
	</view>
</template>

<script>
	import { getUserProfileApi, updateUserProfileApi } from '@/api/index.js';
	import { mapState, mapMutations } from 'vuex';
	
	export default {
		data() {
			return {
				formData: {
					nickname: '',
					gender: 1,
					phone: '',
					wechat: '',
					birthday: '',
					zodiac: '',
					constellation: '',
					height: ''
				},
				zodiacs: ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'],
				zodiacIndex: 0,
				constellations: ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'],
				constellationIndex: 0,
				heights: Array.from({length: 81}, (_, i) => (150 + i) + 'CM'),
				heightIndex: 0
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.getUserProfile();
		},
		methods: {
			...mapMutations(['setUserInfo']),
			
			// 获取用户资料
			getUserProfile() {
				if (!this.userInfo || !this.userInfo.id) {
					this.$hr.methods.toast('请先登录');
					setTimeout(() => {
						this.$hr.methods.goPage('/login/index');
					}, 1500);
					return;
				}
				
				// 如果已经有用户信息，先填充表单
				if (this.userInfo) {
					this.formData.nickname = this.userInfo.nickname || '';
					this.formData.gender = this.userInfo.gender || 1;
					this.formData.phone = this.userInfo.phone || '';
					this.formData.wechat = this.userInfo.wechat || '';
					this.formData.birthday = this.userInfo.birthday || '';
					this.formData.zodiac = this.userInfo.zodiac || '';
					this.formData.constellation = this.userInfo.constellation || '';
					this.formData.height = this.userInfo.height || '';
					
					// 设置索引值
					this.zodiacIndex = this.zodiacs.indexOf(this.formData.zodiac);
					this.constellationIndex = this.constellations.indexOf(this.formData.constellation);
					this.heightIndex = this.heights.indexOf(this.formData.height + 'CM');
				}
				
				// 从服务器获取最新资料
				this.$hr.methods.loading();
				getUserProfileApi().then(res => {
					this.$hr.methods.hideloading();
					if (res) {
						this.formData.nickname = res.nickname || '';
						this.formData.gender = res.gender || 1;
						this.formData.phone = res.phone || '';
						this.formData.wechat = res.wechat || '';
						this.formData.birthday = res.birthday || '';
						this.formData.zodiac = res.zodiac || '';
						this.formData.constellation = res.constellation || '';
						this.formData.height = res.height || '';
						
						// 设置索引值
						this.zodiacIndex = this.zodiacs.indexOf(this.formData.zodiac);
						this.constellationIndex = this.constellations.indexOf(this.formData.constellation);
						this.heightIndex = this.heights.indexOf(this.formData.height + 'CM');
					}
				}).catch(() => {
					this.$hr.methods.hideloading();
					this.$hr.methods.toast('获取资料失败');
				});
			},
			
			// 修改头像
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						
						// 上传头像
						this.$hr.methods.loading('上传中...');
						uni.uploadFile({
							url: this.$hr.config.SERVER_URL + '/api/users/v1/avatar',
							filePath: tempFilePath,
							name: 'avatar',
							header: {
								'Authorization': 'Bearer ' + uni.getStorageSync('token')
							},
							success: (uploadRes) => {
								this.$hr.methods.hideloading();
								const data = JSON.parse(uploadRes.data);
								if (data.code === 200) {
									this.$hr.methods.toast('头像上传成功', 'success');
									// 更新本地用户信息
									const updatedUserInfo = { ...this.userInfo, avatar: data.data.avatar_url };
									this.setUserInfo(updatedUserInfo);
								} else {
									this.$hr.methods.toast(data.message || '上传失败');
								}
							},
							fail: () => {
								this.$hr.methods.hideloading();
								this.$hr.methods.toast('上传失败');
							}
						});
					}
				});
			},
			
			// 生日选择器变化
			onBirthdayChange(e) {
				this.formData.birthday = e.detail.value;
			},
			
			// 属相选择器变化
			onZodiacChange(e) {
				this.zodiacIndex = e.detail.value;
				this.formData.zodiac = this.zodiacs[this.zodiacIndex];
			},
			
			// 星座选择器变化
			onConstellationChange(e) {
				this.constellationIndex = e.detail.value;
				this.formData.constellation = this.constellations[this.constellationIndex];
			},
			
			// 身高选择器变化
			onHeightChange(e) {
				this.heightIndex = e.detail.value;
				this.formData.height = parseInt(this.heights[this.heightIndex]);
			},
			
			// 保存资料
			saveProfile() {
				if (!this.formData.nickname) {
					this.$hr.methods.toast('请输入昵称');
					return;
				}
				
				if (!this.formData.birthday) {
					this.$hr.methods.toast('请选择生日');
					return;
				}
				
				// 提交表单
				this.$hr.methods.loading('保存中...');
				updateUserProfileApi({
					nickname: this.formData.nickname,
					wechat: this.formData.wechat,
					birthday: this.formData.birthday,
					zodiac: this.formData.zodiac,
					constellation: this.formData.constellation,
					height: this.formData.height
				}).then(res => {
					this.$hr.methods.hideloading();
					this.$hr.methods.toast('保存成功', 'success');
					
					// 更新本地用户信息
					const updatedUserInfo = { ...this.userInfo, ...this.formData };
					this.setUserInfo(updatedUserInfo);
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}).catch(() => {
					this.$hr.methods.hideloading();
					this.$hr.methods.toast('保存失败');
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style> 